<template>
	<view class="container">
		<navbar bg-color="#E72A2A" title="购物车" color="#ffffff">
			<view class="left-icon" slot="leftIcon" style="position: absolute">
				<view class="logo">
					<image :src="logo" mode="aspectFit" />
				</view>
			</view>
		</navbar>
		<view class="content">
			<view class="null" v-if="list.length == 0">
				<view class="img">
					<image :src="$img_base_url('/mine/17.png')" mode="widthFix"></image>
				</view>
				<view class="text-1"> 购物车竟然是空的 </view>
				<view class="text-2"> 为自己挑点喜欢的东西 </view>
			</view>
			<view class="cart-box" v-else>
				<view class="top">
					<text>共{{ list.length || 0 }}件商品</text>
					<view class="btn" @click="isEdit = !isEdit">
						<text v-if="!isEdit">管理</text>
						<text v-else>完成</text>
					</view>
				</view>
				<view class="list">
					<view class="item" v-for="(item, i) in list" :key="item.goods_id">
						<view class="checkbox" @click="itemCheck(item, i)">
							<image v-if="item.checked" :src="$img_path('/mall/18.png')" mode="widthFix"></image>
							<image v-else :src="$img_path('/mall/19.png')" mode="widthFix"></image>
						</view>
						<view class="goodsImg" @click="goGoodsDet(item)">
							<image :src="$img_base_url(item.image)" mode="aspectFill"></image>
						</view>
						<view class="info" @click="goGoodsDet(item)">
							<view class="name one-row">
								{{ item.title }}
							</view>
							<view class="spec" @click="selectSpec('cart', item, i)">
								<text>{{ item.sku.difference.join("/") }}</text>
								<image :src="$img_path('/mall/20.png')" mode="widthFix"></image>
							</view>
							<view class="price_num">
								<view class="p">
									¥
									<text>{{ gPrice(String((item.sku.price * item.number).toFixed(2)))[0] }}</text>{{ gPrice(String((item.sku.price * item.number).toFixed(2)))[1] }}
								</view>
								<view class="num">
									<image :src="$img_path('/mall/13.png')" @click.stop="computedNum('jian', i)"
										mode="widthFix"></image>
									<!-- <input type="number" v-model="item.number" @blur="blurComputed($event, i)" /> -->
									<text style="margin: 0 20rpx">{{ item.number }}</text>
									<image :src="$img_path('/mall/12.png')" @click.stop="computedNum('add', i)"
										mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="recommend">
				<view class="title">
					<text>—— 你可能还喜欢 ——</text>
				</view>
				<view class="list">
					<view class="item" v-for="item in like_list" :key="item.id">
						<itemBox :styleType="1" :goodsDetail="item" :pageUrl="'/pagesMall/goods/detail?id=' + item.id"
							:title_row="1" :imageStyle="{ width: '344rpx', height: '344rpx' }">
							<text slot="center" style="margin-top: 16rpx; display: block">销量：{{ item.sales }}</text>
							<!-- <view slot="tagList" class="tagList">
								<view class="tag-item">
									标签标签
								</view>
							</view> -->
						</itemBox>
					</view>
				</view>
				<view class="b-tip">
					{{ contentText[like_status] }}
				</view>
			</view>
		</view>

		<view class="b-btn" v-if="true">
			<view class="p-box">
				<view class="all-checkbox" @click="allCheck">
					<image v-if="allChecked" :src="$img_base_url('/mine/18.png')" mode="widthFix"></image>
					<image v-else :src="$img_base_url('/mine/19.png')" mode="widthFix"></image>
					<text>全选</text>
				</view>
				<view class="r-btn">
					<view class="all-price" v-if="!isEdit">
						<text>合计：</text>
						<view class="n"> <text>￥</text>{{ allPrice }} </view>
					</view>
					<button v-if="!isEdit" @click="toPay">结算（{{ check_num }}）</button>
					<button v-if="isEdit" @click="select_del">删除（{{ check_num }}）</button>
				</view>
			</view>
		</view>

		<tarbar index="3" page="3" :shadow="false"></tarbar>
		<!-- 规格选择 -->
		<goodsSelect ref="selectGoods" :selectGood="selectGood" :goodsInfo="selectGoodsInfo" @cartEdit="cartEdit">
		</goodsSelect>
	</view>
</template>

<script>
	const FormData = require("@/utils/formdata/index.js");
	import {
		synchroCart,
		goodsDetail,
		storageCart,
		getLikes
	} from "@/utils/api/mallApi.js";
	import goodsSelect from "../../components/popup/goods-select.vue";
	import itemBox from "../../components/service-box/mall-item-box.vue";
	export default {
		components: {
			itemBox,
			goodsSelect,
		},
		data() {
			return {
				isEdit: false,
				list: [],
				products: [],

				s_goods_id: null,
				s_num: null,

				selectGoodsInfo: {},
				selectGood: [],
				allChecked: false,

				like_list: [],
				page: 1,
				last_page: 0,
				total: 0,
				contentText: {
					contentdown: "上滑加载更多",
					contentrefresh: "加载中",
					contentnomore: "没有更多了",
				},
				like_status: "",
				logo: uni.getStorageSync("logo"),
			};
		},
		onLoad() {
			this.getLikes();
		},
		onShow() {
			this.synchroCart();
			
		},
		watch: {},
		computed: {
			allPrice() {
				let p = 0;
				this.list.forEach((e) => {
					if (e.checked) {
						p += Number(e.number * e.sku.price);
					}
				});
				return p.toFixed(2);
			},
			check_num() {
				let arr = this.list.filter((e) => {
					return e.checked;
				});
				return arr.length;
			},
		},
		// 滚动到底部
		onReachBottom(e) {
			if (this.page < this.last_page) {
				this.page++;
				this.getLikes();
			}
		},
		methods: {
			// 猜你喜欢
			getLikes() {
				this.like_status = "contentrefresh";
				getLikes({
					pages: "cart",
					page: this.page,
				}).then((res) => {
					this.last_page = res.data.last_page;
					this.total = res.data.total;
					if (this.page == 1) {
						this.like_list = res.data.data;
					} else {
						this.like_list = [...res.data.data, ...this.like_list];
					}
					if (this.page < res.data.last_page) {
						this.like_status = "contentdown";
					} else {
						this.like_status = "contentnomore";
					}
				});
			},

			// 购物车列表
			synchroCart() {
				uni.showLoading({
					title: "Loading...",
				});
				synchroCart({
					cart: ""
				}).then((res) => {
					uni.hideLoading();
					this.list = res.data;
					this.list.forEach((e) => {
						e.checked = true;
					});
					this.isAllChecked();
				});
			},
			// 规格
			selectSpec(type, data, i) {
				this.getGoodsInfo(this.list[i]);
			},
			getGoodsInfo(data) {
				this.s_goods_id = data.goods_id;
				this.s_num = data.number;

				let formData = new FormData();
				formData.append("id", data.goods_id);
				uni.showLoading();
				goodsDetail(formData.getData()).then((res) => {
					uni.hideLoading();
					this.selectGoodsInfo = res.data;
					let s_a = res.data.sku.filter((e) => {
						return this.compareArrays(data.sku.difference, e.difference);
					});

					this.selectGood = s_a[0].difference;

					this.$refs.selectGoods.open("cart", data.number);
					// this.selectGood = res.data.sku[0]
				});
			},

			itemCheck(item, i) {
				this.list[i].checked = !this.list[i].checked;
				this.isAllChecked();
			},
			allCheck() {
				this.allChecked = !this.allChecked;
				this.list.forEach((e) => {
					e.checked = this.allChecked;
				});
			},
			// 判断全选状态
			isAllChecked() {
				let arr = this.list.filter((e) => {
					return e.checked == false;
				});
				this.allChecked = arr.length > 0 ? false : true;
			},

			// 数量修改
			computedNum(type, i) {
				let sku = this.list[i].sku;
				let data = this.list[i];
				console.log(sku, data);
				let stock = sku.stock;
				let num = data.number;
				this.s_goods_id = data.goods_id;
				this.s_num = JSON.parse(JSON.stringify(data.number));
				if (type == "jian" && num > 1) {
					num--;
					this.list[i].number = num;
					this.cartEdit({
						sku_id: sku.id,
						number: num,
					});
				}
				if (type == "add" && num < stock) {
					num++;
					this.list[i].number = num;
					this.cartEdit({
						sku_id: sku.id,
						number: num,
					});
				}
				if (type == "add" && num >= stock) {
					uni.showToast({
						title: "已达到库存上限",
						icon: "none",
					});
				}
				// this.allPrice();
			},
			blurComputed(e, i) {
				let sku = this.list[i].sku;
				let data = JSON.parse(JSON.stringify(this.list[i]));
				let stock = sku.stock;
				let num = e.detail.value;
				this.s_goods_id = data.goods_id;
				this.s_num = JSON.parse(JSON.stringify(data.number));
				// console.log(e.detail,this.s_num)
				if (num < 1) {
					this.list[i].number = this.s_num;
					return;
				}
				if (num > 1 && num < stock) {
					this.list[i].number = num;
					this.cartEdit({
						sku_id: sku.id,
						number: num,
					});
				} else {
					uni.showToast({
						title: "库存不足",
						icon: "none",
					});
					this.list[i].number = stock;
					setTimeout(() => {
						this.cartEdit({
							sku_id: sku.id,
							number: stock,
						});
					}, 500);
				}
			},

			toPay() {
				let arr = [];
				this.list.forEach((e) => {
					if (e.checked) {
						arr.push({
							goods_id: e.goods_id,
							number: e.number,
							sku_id: e.sku.id,
						});
					}
				});
				if (arr.length == 0) {
					uni.showToast({
						title: "请选择商品",
						icon: "none",
					});
					return;
				}
				uni.navigateTo({
					url: `/pagesMall/order/confirm_order?id=${this.goods_id}&data=${JSON.stringify(arr)}`,
				});
			},

			select_del() {
				uni.showLoading({
					title: "Loading",
				});
				let arr = [];
				this.list.forEach((e) => {
					if (e.checked) {
						arr.push({
							goods_id: e.goods_id,
							number: e.number,
							sku_id: e.sku.id,
						});
					}
				});
				storageCart({
					data: arr,
					type: "del",
				}).then((res) => {
					uni.hideLoading();
					uni.showToast({
						title: "删除成功",
						icon: "none",
					});
					this.synchroCart();
					// this.$refs.selectGoods.close()
				});
			},

			cartEdit(data) {
				console.log(data, "-");
				// uni.showLoading({
				//   title: "Loading",
				// });
				storageCart({
					goods_id: this.s_goods_id,
					number: data.number,
					sku_id: data.sku_id,
					type: data.number > this.s_num ? "bcadd" : "bcsub",
				}).then((res) => {
					// uni.hideLoading();
					// this.synchroCart()
					this.$refs.selectGoods.close();
				});
			},
			goGoodsDet(item) {
				uni.navigateTo({
					url: `/pagesMall/goods/detail?id=${item.goods_id}`,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		.left-icon {
			left: 22rpx;
			width: 142rpx;
			height: 68rpx;
			// background: #f8f8f8;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.content {
			.null {
				margin-top: 20rpx;
				background: #ffffff;
				width: 100%;
				padding: 22rpx 0 64rpx;
				box-sizing: border-box;

				.img {
					width: 360rpx;
					height: 360rpx;
					margin: 0 auto;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.text-1 {
					font-weight: bold;
					font-size: 36rpx;
					color: #333333;
					line-height: 50rpx;
					margin-top: 24rpx;
					text-align: center;
				}

				.text-2 {
					font-weight: bold;
					font-size: 30rpx;
					color: #333333;
					line-height: 42rpx;
					margin-top: 18rpx;
					text-align: center;
				}
			}

			.cart-box {
				padding: 40rpx 22rpx 20rpx;
				box-sizing: border-box;

				.top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 20rpx;

					&>text {
						font-weight: bold;
						font-size: 32rpx;
						color: #333333;
						line-height: 44rpx;
					}

					.btn {
						text {
							font-weight: bold;
							font-size: 32rpx;
							color: #e72a2a;
							line-height: 44rpx;
						}
					}
				}

				.list {
					.item {
						background: #ffffff;
						border-radius: 20rpx;
						display: flex;
						align-items: center;
						padding: 20rpx;
						box-sizing: border-box;
						margin-bottom: 20rpx;

						.checkbox {
							width: 48rpx;
							height: 48rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.goodsImg {
							width: 180rpx;
							height: 180rpx;
							margin-left: 20rpx;

							image {
								width: 100%;
								height: 100%;
								border-radius: 16rpx;
							}
						}

						.info {
							width: calc(100% - 248rpx);
							padding-left: 24rpx;
							display: flex;
							flex-direction: column;

							.name {
								font-weight: bold;
								font-size: 34rpx;
								color: #333333;
								line-height: 48rpx;
							}

							.spec {
								display: flex;
								align-items: center;
								margin-top: 10rpx;

								text {
									font-weight: bold;
									font-size: 28rpx;
									color: #333333;
									line-height: 40rpx;
								}

								image {
									width: 24rpx;
									height: 24rpx;
									margin-left: 12rpx;
								}
							}

							.price_num {
								display: flex;
								justify-content: space-between;
								align-items: center;

								.p {
									font-weight: 900;
									font-size: 34rpx;
									color: #ff2e2e;
									line-height: 58rpx;

									text {
										font-size: 42rpx;
									}
								}

								.num {
									display: flex;
									align-items: center;

									image {
										width: 44.8rpx;
										height: 44.8rpx;
									}

									input {
										width: 68rpx;
										padding: 0 10rpx;
										box-sizing: border-box;
										text-align: center;
									}
								}
							}
						}
					}
				}
			}

			.recommend {
				margin-top: 20rpx;
				// background-color: #FFFFFF;
				padding: 40rpx 22rpx 50rpx;
				box-sizing: border-box;

				.title {
					font-weight: bold;
					font-size: 36rpx;
					color: #333333;
					line-height: 50rpx;
					text-align: center;
				}

				.list {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

					.item {
						width: 344rpx;
						margin-top: 20rpx;

						.tagList {
							display: flex;
							align-items: center;
							margin-top: 16rpx;
							margin-bottom: 4rpx;

							.tag-item {
								// width: 118rpx;
								height: 34rpx;
								border-radius: 6rpx 6rpx 6rpx 6rpx;
								border: 2rpx solid #0291ff;
								font-weight: 400;
								font-size: 20rpx;
								color: #0291ff;
								// line-height: 34rpx;
								text-align: center;
								margin-left: 12rpx;
								padding: 3rpx 12rpx;
								box-sizing: border-box;

								&:first-child {
									background: #ff6602;
									border-color: #ff6602;
									color: #ffffff;
									margin-left: 0;
								}
							}
						}
					}
				}

				.b-tip {
					text-align: center;
					padding: 20rpx 0 10rpx;
					color: #dadada;
					font-size: 28rpx;
				}
			}
		}

		.b-btn {
			width: 100%;
			height: 120rpx;

			.p-box {
				position: fixed;
				bottom: calc(98rpx + constant(safe-area-inset-bottom));
				bottom: calc(98rpx + env(safe-area-inset-bottom));
				width: 100%;
				height: 120rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #ffffff;
				padding: 0 22rpx;
				box-sizing: border-box;
				box-shadow: 0rpx -4rpx 8rpx 2rpx rgba(0, 0, 0, 0.05);
				border-bottom: 2rpx solid #f8f8f8;

				.all-checkbox {
					display: flex;
					align-items: center;

					image {
						width: 48rpx;
						height: 48rpx;
					}

					text {
						font-weight: 400;
						font-size: 30rpx;
						color: #333333;
						line-height: 42rpx;
						margin-left: 12rpx;
					}
				}

				.r-btn {
					display: flex;
					align-items: center;

					.all-price {
						display: flex;
						align-items: center;

						&>text {
							font-weight: 400;
							font-size: 30rpx;
							color: #333333;
							line-height: 42rpx;
						}

						.n {
							display: flex;
							align-items: center;
							font-weight: bold;
							font-size: 40rpx;
							color: #e72a2a;
							line-height: 56rpx;

							text {
								font-size: 30rpx;
							}
						}
					}

					button {
						width: 214rpx;
						height: 80rpx;
						background: linear-gradient(90deg, #ffa233 0%, #fb4c4c 100%);
						border-radius: 80rpx;
						font-weight: bold;
						font-size: 32rpx;
						color: #ffffff;
						line-height: 80rpx;
						margin-left: 12rpx;
					}
				}
			}
		}
	}

	.logo {
		image {
			width: 54rpx;
			// height: 44rpx;
		}
	}
</style>